'use strict';

var React = require('react/addons');
var Router = require('react-router');
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var CheckBox = require('../../ui/checkbox.jsx');
var SelectUI = require('../../modules/select.jsx');


var UserTabOne = React.createClass({
  getInitialState : function(){
    return {
      isShowSelectView : false,
      defaultSelectTxt : '批量分组'
    };
  },
  handleCheckAll : function(e, checkState){
      
  },
  handleToggle : function(){
    var off = ! this.state.isShowSelectView;
    this.setState({ isShowSelectView : off });
  },
  handleFilter : function(selectName){
    this.setState({ defaultSelectTxt : selectName });
    this.handleToggle();
  },
  render: function() {
   var self =  this;
   var SelectDropdownMenu = 
            this.state.isShowSelectView ? 
                  <ul className="do-dropdown-menu">
                    <li>
                      <a href="javascript:;" onClick={ this.handleFilter.bind(this,'查看新提问') }>
                         查看新提问 
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;" onClick={ this.handleFilter.bind(this,'查看新追问') }>
                         查看新追问 
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;" onClick={ this.handleFilter.bind(this,'查看新通知') }>
                         查看新通知
                      </a>
                    </li>
                  </ul> : [];

    return (
	/* jshint ignore:start */
		<div className="do-page-user-content">
                  <div className="do-page-user-header do-fix-clear">
                        <div className="do-page-user-header-left">
                              <CheckBox  value="全部" onClick={ self.handleCheckAll }/>
                              <div className="do-page-user-line-box">
                                <a href="javascript:;" onClick={ this.handleToggle }>{ this.state.defaultSelectTxt } <i className="fa fa-sort-down do-sort-down"></i></a>
                                <ReactCSSTransitionGroup transitionName="do-fade">
                                { SelectDropdownMenu }
                                </ReactCSSTransitionGroup>
                              </div>
                        </div>
                        <div className="do-page-user-header-right">
                              <a href="javascript:;" className="do-btn do-btn-default do-btn-md do-mr-md">分组管理</a>
                              <div className="do-search">
                                    <input type="text" className="do-search-input" placeholder="搜索内容" />
                                    <button className="do-search-btn">搜索</button>
                              </div>
                        </div>
                  </div>
                  <table className="do-table">
                        <thead>
                              <tr>
                                    <th>选择</th>
                                    <th>用户昵称</th>
                                    <th>备注</th>
                                    <th>年龄</th>
                                    <th>用户状态 <i className="fa fa-sort-down do-sort-down"></i></th>
                                    <th>用户分组 <i className="fa fa-sort-down do-sort-down"></i></th>
                                    <th>操作</th>
                              </tr>
                        </thead>
                        <tbody>
                              <tr>
                                    <td>
                                        <CheckBox />
                                    </td>
                                    <td>小倩倩</td>
                                    <td>张倩倩</td>
                                    <td>28岁</td>
                                    <td>备孕分子</td>
                                    <td><SelectUI /></td>
                                    <td>退单</td>
                              </tr>
                            <tr className="do-table-odd">
                                    <td>
                                        <CheckBox onClick={ self.handleCheckAll } />
                                    </td>
                                    <td>小倩倩</td>
                                    <td>张倩倩</td>
                                    <td>28岁</td>
                                    <td>备孕分子</td>
                                    <td><SelectUI /></td>
                                    <td>退单</td>
                              </tr>
                              <tr>
                                    <td>
                                        <CheckBox onClick={ self.handleCheckAll } />
                                    </td>
                                    <td>小倩倩</td>
                                    <td>张倩倩</td>
                                    <td>28岁</td>
                                    <td>备孕分子</td>
                                    <td><SelectUI /></td>
                                    <td>退单</td>
                              </tr>
                              <tr className="do-table-odd">
                                    <td>
                                        <CheckBox onClick={ self.handleCheckAll } />
                                    </td>
                                    <td>小倩倩</td>
                                    <td>张倩倩</td>
                                    <td>28岁</td>
                                    <td>备孕分子</td>
                                    <td><SelectUI /></td>
                                    <td>退单</td>
                              </tr>
                              <tr>
                                    <td>
                                        <CheckBox onClick={ self.handleCheckAll } />
                                    </td>
                                    <td>小倩倩</td>
                                    <td>张倩倩</td>
                                    <td>28岁</td>
                                    <td>备孕分子</td>
                                    <td><SelectUI /></td>
                                    <td>退单</td>
                              </tr>
                        </tbody>
                  </table>
                  <div classNmae="do-page-user-footbar"></div>
		</div>
	/* jshint ignore:end */
    );
  }
});

module.exports =UserTabOne;
